<script setup lang="ts">
</script>
<template>
  <div class="new-header-button">
    <div class="new-header-button-item">
      <slot></slot>
    </div>
  </div>
</template>
<style scoped>
.new-header-button{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.3s;
}
.new-header-button:hover{
  width: 46px;
  border-left: 1px solid var(--el-border-color);
  border-right: 1px solid var(--el-border-color);
  color: var(--el-color-primary);
  transition: color 0.3s;
}
.new-header-button-item{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>